<div style="
          direction: ltr;
          display: grid;
          grid-auto-flow: column;
          grid-template-columns: min-content;
          grid-gap: 12px;
      ">
    <script suppress-error='BL9992'>
      darkTheme = false;
    </script>
    <FluentSwitch onclick="document.dir = document.dir === 'rtl' ? 'ltr' : 'rtl'; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('direction', document.dir);">
        <span style="padding-inline-end: 8px;">Direction</span>
        <span slot="unchecked-message">ltr</span>
        <span slot="checked-message">rtl</span>
    </FluentSwitch>

    <FluentSwitch onclick="document.darkTheme = !document.darkTheme; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('background-color', darkTheme ? '#333333' : '#F7F7F7');">
        <span style="padding-inline-end: 8px;"> Theme</span>
        <span slot="checked-message">Dark</span>
        <span slot="unchecked-message">Light</span>
    </FluentSwitch>
</div>
<h1>Switch</h1>
<h4>Default</h4>
<div style="display: flex; flex-direction: column;">
    <FluentSwitch></FluentSwitch>
    <FluentSwitch>
        Dark Mode
    </FluentSwitch>
    <FluentSwitch Checked="true">
        New Feature
        <span slot="checked-message">On</span>
        <span slot="unchecked-message">Off</span>
    </FluentSwitch>
    <FluentSwitch>
        Theme
        <span slot="checked-message">Dark</span>
        <span slot="unchecked-message">Light</span>
    </FluentSwitch>
</div>

<h4>Checked</h4>
<FluentSwitch Checked="true"></FluentSwitch>

<!-- Required -->
<h4>Required</h4>
<FluentSwitch Required="true"></FluentSwitch>

<!-- Disabled -->
<h4>Disabled</h4>
<div style="display: flex; flex-direction: column;">
    <FluentSwitch Disabled="true"></FluentSwitch>
    <FluentSwitch Disabled="true">label</FluentSwitch>
    <FluentSwitch Disabled="true" Checked="true">checked</FluentSwitch>
    <FluentSwitch Disabled="true" Checked="true">
        checked
        <span slot="checked-message">On</span>
        <span slot="unchecked-message">Off</span>
    </FluentSwitch>
</div>

<h4>Inline</h4>
<FluentSwitch style="margin-inline-end: 12px;">Light Speed</FluentSwitch>
<FluentSwitch style="margin-inline-end: 12px;">Ridiculous Speed</FluentSwitch>
<FluentSwitch style="margin-inline-end: 12px;">Ludicrous Speed</FluentSwitch>
<FluentSwitch Checked="true">Plaid Speed</FluentSwitch>
